<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,
        li {
            list-style: none;
        }

        li {
            width: 200px;
            height: 100px;
            background: blue;
            margin: 10px;
        }

        .newul {
            margin: 100px;
            border: 1px solid green;
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>
    <ul class="oldul">
        <li>01</li>
        <li>02</li>
        <li>03</li>
    </ul>

    <ul class="newul">



    </ul>
    <script>
        //将小方块拖拽到 div中
        /*
            1.给小方块设置可以拖拽的看属性
            2.判断 下方块已经拖到div中 ，并且松开了鼠标
            3.在 div中添加一个li，将原来的li删除
        */
        var oOldUl = document.querySelector('.oldul');
        var aOldLi = oOldUl.querySelectorAll('li');
        var oNewUl = document.querySelector('.newul');
        for (var i = 0; i < aOldLi.length; i++) {
            aOldLi[i].draggable = true;
            //开始拖拽,将数据添加到 dataTransfer ，在到了目的地再取出来
            aOldLi[i].ondragstart = function (ev) {
                ev.dataTransfer.setData('text', this.innerHTML);
            }
        }

        oNewUl.ondragover = function (ev) {
            ev.preventDefault();
        }

        oNewUl.ondrop = function (ev) {
            console.log('拖到位了');
            console.log(ev.dataTransfer.getData('text'));
            //获取 dataTransfer 里面保存的数据
            var text = ev.dataTransfer.getData('text');
            //在 div中添加一个li，将原来的li删除
            var newli = document.createElement('li');
            newli.innerHTML = text;
            oNewUl.appendChild(newli);
            //删除
            for (let i = 0; i < aOldLi.length; i++) {
                if (aOldLi[i].innerHTML == text) {
                    oOldUl.removeChild(aOldLi[i]);
                }
            }
        }
    </script>
</body>

</html>